<template>
  <div class="left" tabindex="1">
    <el-menu :default-active="activeTab"
         :collapse="!menuExpand"
         @select="selectMenu" class="h-100">
      <template v-for="menu in menus">
        <sub-menu :menu="menu" :key="menu.id"></sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import SubMenu from './SubMenu'
import { mapState, mapGetters } from 'vuex'

export default {
  components: { SubMenu },
  data () {
    return {}
  },
  computed: {
    ...mapState(['menus', 'activeTab', 'menuExpand']),
    ...mapGetters(['flatMenu'])
  },
  methods: {
    selectMenu (id, idPath) {
      // console.log('mainlayout selectMenu: ' + id, idPath)
      const menu = this.flatMenu.find(m => m.id === id)
      if (menu && menu.path !== this.$route.fullPath) {
        this.$router.push(menu.path)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .left{
    height: calc(100vh - 52px - 10px);
    overflow: auto;
    background: white;
    border-right: solid 1px #e6e6e6;
  }
  .left:focus{
    outline: 0;
  }

  .left /deep/ {
    .el-menu{
      border-right: 0;
    }
    .el-menu:not(.el-menu--collapse) {
      width: 200px;
    }
  }

</style>
